<script lang="ts" setup>
import type { FormInstance } from 'ant-design-vue';

import { onBeforeUnmount, reactive, ref } from 'vue';

import { Page } from '@vben/common-ui';

import { MacCommandOutlined } from '@ant-design/icons-vue';
import {
  Card,
  Col,
  Form,
  FormItem,
  message,
  Row,
  Select,
  Space,
} from 'ant-design-vue';

import { deviceSelect, productSelect } from '#/api/iot/alarm/config';
import { useMqttStore } from '#/store/mqtt';

import Simulation from './components/simulation.vue';
import mqttService from './mqtt';

const useMqtt = useMqttStore();

const isSimulation = ref(false);
const formRef = ref<FormInstance>();
const productOption = ref<{ id: number; productName: string }[]>([]); // 产品下拉
const deviceOption = ref<{ deviceName: string; id: number }[]>([]);
const mqttOption = reactive<{
  deviceId: string | undefined;
  deviceSn: string;
  productId: string | undefined;
  productKey: string;
}>({
  productId: undefined,
  deviceId: undefined,
  productKey: '',
  deviceSn: '',
});
// 获取产品下拉
async function getProductSelect() {
  const res = await productSelect();
  productOption.value = res;
}
getProductSelect();
// 产品change事件
async function handleProductChange(option: any) {
  mqttOption.productKey = option.productKey;
  await getDeviceSelect(option.id);
}
// 获取设备下拉
async function getDeviceSelect(id: number) {
  mqttOption.deviceId = undefined;
  deviceOption.value = [];
  const res = await deviceSelect(id);
  deviceOption.value = res;
}
// 设备change事件
async function handleDeviceChange(option: any) {
  mqttOption.deviceSn = option.deviceSn;
}
// 开启模拟
async function onSubmit() {
  if (!mqttOption.productId) {
    message.warning({
      content: '请选择产品',
    });
    return;
  }
  if (!mqttOption.deviceId) {
    message.warning({
      content: '请选择设备',
    });
    return;
  }
  useMqtt.setMqttOption(mqttOption);

  isSimulation.value = true;
}

// 关闭模拟
function onClose() {
  isSimulation.value = false;
  mqttOption.deviceId = undefined;
  mqttOption.productId = undefined;
  deviceOption.value = [];
  useMqtt.$reset();
  mqttService.disconnect();
}

onBeforeUnmount(() => {
  useMqtt.$reset();
  mqttService.disconnect();
});
</script>

<template>
  <Page :auto-content-height="true">
    <Card class="mb-3">
      <Row :gutter="16">
        <Form
          ref="formRef"
          :model="mqttOption"
          layout="inline"
          style="width: 100%"
        >
          <Col :span="6">
            <FormItem label="产品" name="productId">
              <Select
                @change="(_, option) => handleProductChange(option)"
                v-model:value="mqttOption.productId"
                placeholder="请选择产品"
                :options="productOption"
                :disabled="isSimulation"
                :field-names="{
                  label: 'productName',
                  value: 'id',
                  options: 'productOption',
                }"
              />
            </FormItem>
          </Col>
          <Col :span="6">
            <FormItem label="设备" name="deviceIds">
              <Select
                @change="(_, option) => handleDeviceChange(option)"
                v-model:value="mqttOption.deviceId"
                placeholder="请选择设备"
                :options="deviceOption"
                :disabled="isSimulation"
                :field-names="{
                  label: 'deviceName',
                  value: 'id',
                  options: 'deviceOption',
                }"
              />
            </FormItem>
          </Col>
          <Col :span="6">
            <Space>
              <a-button
                type="primary"
                @click="onSubmit"
                :disabled="isSimulation"
              >
                开始模拟
              </a-button>
              <a-button @click="onClose" :disabled="!isSimulation">
                关闭模拟
              </a-button>
            </Space>
          </Col>
        </Form>
      </Row>
    </Card>
    <Card>
      <div v-if="isSimulation">
        <Simulation />
      </div>
      <div class="empty" v-else>
        <div>
          <MacCommandOutlined style="font-size: 130px; color: #4898f6" />
        </div>
        <div class="name">设备模拟器</div>
        <div class="explain">
          设备模拟器可以模拟设备与云端建立
          MQTT连接，上报数据，接收云端控制指令，以及物模型通信等完整过程
        </div>
      </div>
    </Card>
  </Page>
</template>
<style scoped lang="scss">
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50vh;

  .name {
    margin-top: 20px;
    font-size: 25px;
  }

  .explain {
    margin-top: 20px;
    font-size: 16px;
  }
}
</style>
